Skip to main content

Bar Chart Component

1. Introduction​

The BarChart component is a fundamental visualization tool used to represent categorical data with rectangular bars, where the length of each bar is proportional to the value it represents. This type of chart is particularly effective for comparing quantities across different categories, making it ideal for business applications such as sales analysis, performance tracking, and market research. By using a BarChart, businesses can easily identify trends, compare data points, and communicate insights in a straightforward and visually appealing manner.

image

Properties​

To effectively utilize a BarChart, the following data and attributes are necessary:

  • Chart-Level Attributes:
    • Code: A unique identifier for the bar chart, used for referencing and integration within larger data systems or dashboards. The code is also used to be referenced in the actions through your application.
    • Title: A descriptive title for the bar chart, providing context and clarity to the viewer.
  • Bar Attributes:
    • Name: The label for each bar, offering immediate understanding of what each bar represents.
    • Values: A series of numerical values for each bar, represented as a semicolon-separated string (e.g., 0;1;2;3;4;5;6;7;8;9). These values determine the height of each bar and are used to plot the data points along the X-axis.
  • Data Source Attributes:
    • Y-Axis Definition: A series of numerical values that define the scale of the Y-axis, represented as a comma-separated string (e.g., 0,0,1,2,4,4,5,6,6,10). This series determines the range and scaling of the Y-axis, ensuring that the data is accurately represented.
  • Dynamic Dataset Addition: The component should support the addition of new datasets, allowing for flexibility and adaptability as data changes. This feature is crucial for businesses that need to update their visualizations in real-time or as new data becomes available.

By structuring the BarChart component with these attributes, businesses can create dynamic and informative visualizations that effectively communicate data insights to stakeholders. The ability to add datasets dynamically ensures that the chart remains relevant and up-to-date, accommodating the evolving needs of the business environment.

Style​

Best Practices​

  • Clarity and Readability: Use distinct colors for different datasets to ensure the bar chart is easy to interpret. Avoid using too many datasets to prevent clutter and maintain clarity.
  • Consistency: Ensure the bar chart's style aligns with other visual elements in your application, such as using similar fonts and color schemes.
  • Accessibility: Consider using patterns or textures in addition to colors to differentiate datasets for users with color vision deficiencies.
  • Interactivity: Implement hover effects or tooltips to provide additional information about each data point, enhancing user engagement and understanding.

Highest Value Features​

  • Legend Visibility and Orientation: Properly displaying and aligning the legend can enhance the readability and aesthetics of the chart.
  • Dataset Customization: Customizing slice colors and label options allows for a visually appealing design that can highlight specific data points or trends.
  • Grid and Margin Adjustments: Adjusting the grid and margins helps in fitting the chart better within the layout, especially in responsive designs.

All the Settings​

Legend​

  • Visible: Toggle button to turn the legend display on (default) or off. This controls whether the legend is shown alongside the chart.
  • Orientation: Choose between horizontal or vertical orientation for the legend items. This affects how the legend is displayed relative to the chart.
  • Horizontal Alignment (X): Align the legend horizontally within the chart area. Options include:
    • Auto: Automatically positions the legend based on available space.
    • Left: Aligns the legend to the left.
    • Center: Centers the legend (default setting).
    • Right: Aligns the legend to the right.
  • Vertical Alignment (Y): Align the legend vertically within the chart area. Options include:
    • Auto: Automatically positions the legend based on available space.
    • Top: Aligns the legend to the top.
    • Middle: Centers the legend vertically.
    • Bottom: Aligns the legend to the bottom (default setting).

X-axis​

  • Label Color: Set the color of the labels on the X-axis.
    • Design System: By default this follows the "Label Medium" on the active design system.
  • Label Rotation: Rotate the labels in degrees to improve readability, especially when labels are long. Default is 0°.
  • Label Inside Bars: Option to display the dataset label inside the bars for better data representation.

Bar Chart​

  • Center X: Adjust the horizontal position of the bar chart's center within the element. Default is 50%, which centers the chart horizontally.
  • Center Y: Adjust the vertical position of the bar chart's center within the element. Default is 50%, which centers the chart vertically.
  • Radius: Although typically not applicable to bar charts, if used, it would define the overall size of the chart relative to the element size.

Grid​

  • Margin: Define the margin around the chart to adjust its size within the element’s size. This is in pixels and can be defined according to the outline options: all margin, top margin, bottom margin, right margin. Default is 80 pixels all around.

Per Dataset​

  • Slice Color: Customize the color for each dataset slice using the following options:
    • Color Options: Use a color picker or enter values in HEX, RGBA, HSLA format to define the slice color.
    • Design System: By default this follows the "Accent one", "Accent two", "Accent three", "Accent four" on the active design system.

Explanation of Terms​

  • Initial: This value sets the property to its default value as defined in the CSS specification. It is useful when you want to reset a property to its original state.
  • Inherit: This value makes the element inherit the property from its parent element. It is useful for maintaining consistency across elements by using the same styling as the parent.

Actions​

No specific actions defined for the line chart.

Compatible Functions​

  • Add data point to Bar chart
  • Add data set to Bar chart
  • Add x-axis point to Bar chart
  • Clear Bar chart
  • Clear dataset of Bar chart
  • Clear x-axis of Bar chart